<template>
  <!-- 搜索栏 -->
  <el-card class="search-card">
    <el-form :model="searchForm" label-width="120px" inline>
      <el-form-item label="缺陷描述">
        <el-input v-model="searchForm.defectDescription" placeholder="缺陷描述" clearable />
      </el-form-item>
      <el-form-item label="检测项类型">
        <el-select style="width: 150px" v-model="searchForm.detectionItemType" placeholder="检测项类型" clearable>
          <el-option
              v-for="dictData in defectTypeDictList"
              :value="dictData.id"
              :key="dictData.id"
              :label="dictData.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="缺陷等级">
        <el-select style="width: 120px" clearable v-model="searchForm.defectLevel" placeholder="缺陷等级">
          <el-option label="轻微缺陷" :value="1" />
          <el-option label="严重缺陷" :value="2" />
          <el-option label="致命缺陷" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 工具栏 -->
  <div class="toolbar">
    <el-button type="primary" @click="handleAdd">新增缺陷</el-button>
  </div>

  <el-card class="table-card">
    <el-table
        :data="defectList"
    stripe
    border
    >
    <el-table-column type="selection" width="55"/>
    <el-table-column property="defectDescription" label="缺陷描述"/>
    <el-table-column property="detectionItemType" label="缺陷类型"/>
    <el-table-column property="defectLevel" label="缺陷级别">
      <template #default="scope">
        {{scope.row.defectLevel==1?'轻微缺陷':scope.row.defectLevel==2?'严重缺陷':'致命缺陷'}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="handleEdit(scope.row)" size="small">编辑</el-button>
        <el-button @click="handleDelete(scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页栏 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 弹窗 -->
  <el-dialog v-model="dialogFormVisible" @close="dialogClose" :title="dialogTitle" width="800">
    <el-form label-width="auto" :model="defectForm">
      <el-form-item label="缺陷描述">
        <el-input v-model="defectForm.defectDescription" placeholder="缺陷描述" clearable />
      </el-form-item>
      <el-form-item label="检测项类型">
        <el-select style="width: 150px" v-model="defectForm.detectionItemType" placeholder="检测项类型" clearable>
          <el-option
              v-for="dictData in defectTypeDictList"
              :value="dictData.id"
              :key="dictData.id"
              :label="dictData.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="缺陷等级">
        <el-select style="width: 120px" clearable v-model="defectForm.defectLevel" placeholder="缺陷等级">
          <el-option label="轻微缺陷" value="1" />
          <el-option label="严重缺陷" value="2" />
          <el-option label="致命缺陷" value="3" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancleAddOrUpdate">取消</el-button>
        <el-button type="primary" @click="handlerSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>

</template>



<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

//导入我们编写的common-defect.js对应的API
import {
  getCommonDefectPage,
  addCommonDefect,
  getCommonDefectById,
  updateCommonDefect,
  deleteCommonDefect,
  batchDeleteWorkflow
} from "@/api/common-defect.js";

//导入字典相关的API
import { getDictDataList } from "@/api/dictData.js";

//------属性声明⬇
// 绑定搜索表单数据
const searchForm = ref({
  defectDescription:'',
  detectionItemType:'',
  defectLevel:''
})
//保存缺陷类型字典的列表
const defectTypeDictList=ref([]);
//保存查询的列表数据
const defectList=ref([]);
//分页数据
const pagination=ref({
  pageSize:10,
  currentPage:1,
  total:0
})

//编辑标记
const isEdit=ref(false);
//弹窗标题
const dialogTitle=ref("新增缺陷");
//弹窗标记
const dialogFormVisible=ref(false);
//绑定新增或编辑表单数据
const defectForm=ref({});



//取消按钮事件
const cancleAddOrUpdate=()=>{
  dialogFormVisible.value=false;
  defectForm.value={};
}
//改变每页大小的事件
const handleSizeChange=(newSize)=>{
  pagination.value.pageSize=newSize;
  //重新加载每页的数据
  loadDefectList();
}

//改变当前页码的事件
const handleCurrentChange=(newPage)=>{
  pagination.value.currentPage=newPage;
  loadDefectList();
}


//行级别的编辑按钮事件
const handleEdit=(defect)=>{
  dialogTitle.value="编辑缺陷";
  isEdit.value=true;
  //根据id查询要编辑的数据
  getCommonDefectById(defect.id).then(res=>{
    if(res.code==200){
      defectForm.value=res.data;
      dialogFormVisible.value=true;
    }
  })
}

//行级别的删除按钮事件
const handleDelete=(defect)=>{
    ElMessage.success("删除成功");
    deleteCommonDefect(defect.id).then(res=>{
      loadDefectList();
    })
}

//搜索事件
const handleSearch = () => {
  pagination.value.currentPage = 1;
  loadDefectList();
}

//重置事件
const resetSearch = () => {
  // 重置搜索表单
  searchForm.value = {
    defectDescription:'',
    detectionItemType:'',
    defectLevel:''
  };
  pagination.value.currentPage = 1;
  loadDefectList();
}

//关闭窗体的事件
const dialogClose=()=>{
  defectForm.value={};
}

//提交按钮事件
const handlerSubmit=()=>{
  if(isEdit.value){
    //编辑
  updateCommonDefect(defectForm.value).then(res=>{
    if(res.code==200){
      ElMessage.success("编辑成功");
      cancleAddOrUpdate();
      //刷新列表，重新加载数据
      loadDefectList();
    }
    else{
      ElMessage.error(res.msg);
    }
  })
  }
  else{
    //新增
    addCommonDefect(defectForm.value).then(res=>{
      if(res.code==200){
        ElMessage.success("新增成功");
        cancleAddOrUpdate();
        //刷新列表，重新加载数据
        loadDefectList();
      }
      else{
        ElMessage.error(res.msg);
      }
    })
  }
}
//新增事件：
const handleAdd = () => {
  dialogTitle.value="添加缺陷";
  // 此处保留空实现，你可后续自行补充弹窗逻辑
  dialogFormVisible.value=true;
  isEdit.value=false;
}

//加载常见缺陷列表
const loadDefectList=()=>{
  //调用我们申明的API
  getCommonDefectPage(pagination.value.currentPage,pagination.value.pageSize,searchForm.value)
      .then(res=>{
        defectList.value= res.data.list;
        pagination.value.total=res.data.total;
      })
      .catch(error => {
        console.error("加载缺陷列表失败：", error);
        ElMessage.error("数据加载失败，请稍后重试");
      })
}
//加载缺陷类型字典的列表
const loadDefectTypeDictList=()=>{
  getDictDataList({"dictType":'DEFECT_TYPE'})
      .then(res=>{
        defectTypeDictList.value=res.data.records;
      })
      .catch(error => {
        console.error("加载缺陷类型字典失败：", error);
        ElMessage.error("字典数据加载失败，请稍后重试");
      });
}
//---------函数声明⬆
onMounted(()=>{
  loadDefectTypeDictList();
  loadDefectList();
})

</script>

<style scoped>

</style>